<template>
  <div>
    <div class="head">
      <div class="city-name">
        <i class="iconfont icon-dingwei"></i>
        {{ state.city }}
      </div>
      <div @click="toggle" class="city-change">
        <i class="iconfont icon-24gf-city3"></i>
        切换城市
      </div>
    </div>
    <div class="main">
      <div class="weather-info">
        <p class="temp">{{ state.weather.temperature }}℃</p>
        <div class="info">{{ state.weather.weather }}</div>
        <div class="detail">
          <div class="item">
            <i class="iconfont icon-shuidi"></i>
            <span>湿度</span>
            <span>{{ state.weather.humidity }}</span>
          </div>
          <div class="item">
            <i class="iconfont icon-feng"></i>
            <span>风向</span>
            <span>{{ state.weather.windDirection }}</span>
          </div>
          <div class="item">
            <i class="iconfont icon-fengli"></i>
            <span>风力</span>
            <span>{{ state.weather.windPower }}</span>
          </div>
        </div>
      </div>
      <div class="future">
        <div class="future-title">三日天气预报</div>
        <div class="future-content">
          <div v-for="(item,i) in state.future" class="forecast">
            <p class="week">周{{ chinese[Number(item.week)-1] }}</p>
            <i :class="getWeatherIcon(item.dayWeather)"></i>
            <p><span class="left">{{ item.dayTemp }}℃</span>  <span class="right"> / {{ item.nightTemp }}℃</span></p>
          </div>
        </div>
      </div>
    </div>
    
    <div v-show="state.isVisible" >
      <input id="newCity" @keydown.enter="handle" type="text" v-model="state.newCity" placeholder="请输入你要查询的城市">
    </div>
  </div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import { onMounted, reactive } from 'vue'

const chinese=['一','二','三','四','五','六','日']

const state = reactive({
  city: '北京市',
  weather: {},
  future: [],
  newCity: '',
  isVisible: false
})

const getWeatherIcon=(weather) => {
  const weatherIcon = {
    "多云":'icon-duoyun',
    "阴":'icon-yin',
    "晴":'icon-qing',
    "小雨":'icon-zhongyu',
    "中雨":'icon-zhongyu',
    "大雨":'icon-zhongyu',
    "雷阵雨":'icon-leizhenyu',
    "雾":'icon-wu',
    "小雪":'icon-xue',
    "中雪":'icon-xue',
    "大雪":'icon-xue'
  }
  return `iconfont ${weatherIcon[weather] || 'icon-default'}`
}

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "e610ffe3cfb47ec6aae1dd4242e2bc73",
  };
  AMapLoader.load({
    key: "ca3470523286769a11ce9c2ac9667a25", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      // 获取定位
      getLocalCity(AMap)
    })
})

const getLocalCity = (AMap) => {
  AMap.plugin('AMap.CitySearch', function () {
    var citySearch = new AMap.CitySearch()
    citySearch.getLocalCity(function (status, result) {
      if (status === 'complete' && result.info === 'OK') {
        // 查询成功，result即为当前所在城市信息
        // console.log(result.city);  // 会打印当前城市
        state.city = result.city  //将城市改为定位获取到的城市
        getWeather(AMap)
      }
    })
  })
}

const getWeather = (AMap) => {
  //加载天气查询插件
  AMap.plugin("AMap.Weather", function () {
    //创建天气查询实例
    var weather = new AMap.Weather();
    //执行实时天气信息查询
    weather.getLive(state.city, function (err, data) {
      console.log(err, data);  // 获取天气数据
      state.weather = data
      getForecast(AMap)
    });
  });
}

const getForecast = (AMap) => {
  AMap.plugin("AMap.Weather", function () {
  //创建天气查询实例
  var weather = new AMap.Weather();
  //执行实时天气信息查询
  weather.getForecast(state.city, function (err, data) {
    // console.log(err, data);
    state.future = data.forecasts // 获取天气预报数据
    // console.log(state.future);
    //err 正确时返回 null
    //data 返回天气预报数据，返回数据见下表
  });
});
}

const handle = () => {
  state.isVisible =!state.isVisible
  state.city = state.newCity
  getWeather(AMap)
}

const toggle = () => {
  state.isVisible =!state.isVisible
}

</script>

<style lang="css" scoped>
#newCity {
  position: fixed;
  width: 200px;
  height: 30px;
  top:52px;
  right:0;
}
.head {
  height: 53px;
  background-color: #8E6FF7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #FFFFFF;
  font-size: 18px;
  padding: 0 15px;
}

.city-name {
  font-size: 18px;
}

.city-change {
  font-size: 14px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.main {
  padding: 7px 16px 20px 16px;
}

.weather-info {
  width: 100%;
  background: linear-gradient(146deg, rgba(142, 111, 247, 0.1) 0%, rgba(142, 111, 247, 0.05) 100%), rgba(0, 0, 0, 0);
  border-radius: 16px 16px 16px 16px;
  padding: 24px;
  box-sizing: border-box;
}

.temp {
  font-family: Roboto, Roboto;
  font-weight: 300;
  font-size: 60px;
  color: #000000;
  line-height: 60px;
  text-align: center;
  text-transform: none;
}

.info {
  font-family: Roboto, Roboto;
  font-weight: 400;
  font-size: 14px;
  color: #4B5563;
  line-height: 21px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.detail {
  display: flex;
  margin-top: 24px;
}

.item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}

.item i {
  color: #8E6FF7;
  font-size: 18px;
  margin-bottom: 5px;
}

.item span:nth-child(2) {
  font-size: 14px;
  color: #4B5563;
}

.item span:nth-child(3) {
  font-size: 16px;
  color: #000000;
}

.future-title{
font-family: Roboto, Roboto;
font-weight: 500;
font-size: 18px;
color: #000000;
line-height: 28px;
margin: 24px 0 16px 0;
}


.future-content {
  width: 100%;
  overflow-x: auto;
  display: flex;
}

.future-content i{
  font-size: 35px;
  text-align: center;
  line-height: 50px;
}

.forecast{
  padding: 17px;
  margin-right: 16px;
  border: 1px solid #F3F4F6;
  border-radius: 16px;
}
.forecast p{
  text-align: center;
}
.forecast .week{
  text-align: left;
}

.forecast i{
  display: block;
  width: 64px;
  height: 64px;
  margin:8px 11px;
}

.forecast .left{
  font-size: 16px;
  color:#000000;
}
.forecast .right{
  font-size: 14px;
  color:#9CA3AF;
}

</style>